<template>
	<view class="top">
		<!-- 首页标题 -->
		<uni-icons class="chat-icon" type="chat-filled" size="30"></uni-icons>
		<view class="title">首页</view>
		<!-- 地址 -->
		<uni-search-bar bgColor="#fff" class="uni-mt-10" radius="100" :placeholder="selectedCity || '郑州市高新区'"
			clearButton="none" cancelButton="none">
			<template v-slot:searchIcon>
				<image style="width: 30rpx; height: 30rpx; padding-left: 20rpx;" src="/static/dw.png"
					@click="gotoSearchPage"></image>
			</template>
		</uni-search-bar>

		<!-- 菜单 -->
		<uni-card margin="15rpx">
			<uni-grid :showBorder="false" :column="4" :highlight="true">
				<uni-grid-item @click="navigateToPage(0)">
					<view class="grid-item-box" style="background-color: #fff;">
						<image class="im" src="/static/byy.png"></image>
						<text class="text">车辆维修</text>
					</view>
				</uni-grid-item>
				<uni-grid-item @click="navigateToPage(1)">
					<view class="grid-item-box" style="background-color: #fff;">
						<image class="im" src="/static/byy1.png"></image>
						<text class="text">汽车保养</text>
					</view>
				</uni-grid-item>
				<uni-grid-item @click="navigateToPage(2)">
					<view class="grid-item-box" style="background-color: #fff;">
						<image class="im" src="/static/byy2.png"></image>
						<text class="text">专业洗车</text>
					</view>
				</uni-grid-item>
				<uni-grid-item @click="navigateToPage(3)">
					<view class="grid-item-box" style="background-color: #fff;">
						<image class="im" src="/static/byy3.png"></image>
						<text class="text">附近加油</text>
					</view>
				</uni-grid-item>
			</uni-grid>
		</uni-card>
	</view>


	<!-- 附近加油 -->
	<view style="position: relative;top: 20rpx;margin-top: -80rpx">
		<uni-card margin="15rpx" style="margin-top: 100rpx;" title="附近加油站" sub-title="根据你的位置推荐附近加油站">
			<view class="gengduo" @click="gengduo">
				更多 》
			</view>
			<map @markertap="mkp" scale="15" :markers="mks" :longitude="longitude" :latitude="latitude"
				class="map"></map>
			<view class="shop" v-if="info.title !== '商家名称'">
				<view class="shop-v">商家：{{ info.title }}</view>
				<view class="shop-v" style="width: 100%;">地址：{{ info.address }}</view>
				<view class="shop-v">距离：{{ jl }}Km</view>
				<view class="shop-v">电话：{{ info.phone }}</view>
				<view class="shop-v">营业：{{ info.week }}</view>
			</view>
		</uni-card>
	</view>
	<view style="position: relative;top: 10rpx;">
		<uni-card margin="15rpx" style="margin-top: 35rpx;" title="优惠团购" sub-title="钜惠袭来 为您的爱车续航">
			<view class="gengduo" @click="gengduotuangou">
				更多 》
			</view>
			<view class="img-v">
				<view v-for="(item, index) in purchaseList.slice(0, 4)" :key="item.id" class="purchase-item">
					<image class="img" :src="item.img" mode=""></image>
					<view class="purchase-info">
						<view class="purchase-title">{{ item.title }}</view>
						<view class="purchase-time">时间：{{ item.times }} 至 {{ item.endTime }}</view>
						<view class="purchase-publisher">发布人：{{ item.publisher }}</view>
						<view class="purchase-phone">电话：{{ item.telephone }}</view>
					</view>
				</view>
			</view>
		</uni-card>
	</view>

	<!-- 公告 -->

</template>

<script setup>
import { ref } from 'vue';
import { onShow, onUnload } from '@dcloudio/uni-app';
import baseUrl from '@/untils/urlConfig';
import unirequest from '@/untils/unirequest';
import { onLoad } from '@dcloudio/uni-app'

// 页面导航函数
function navigateToPage(index) {
	const routes = [
		'/pages/autoRepair/autoRepair',
		'/pages/autoMaintenance/autoMaintenance',
		'/pages/washcar/washcar',
		'/pages/lsh_nearby_refeling_list/lsh_nearby_refeling_list'
	];
	if (routes[index]) {
		uni.navigateTo({
			url: routes[index]
		});
	}
}
function gotoSearchPage() {
	uni.navigateTo({
		url: '/pages/city/city'
	});
}
// 新增：获取用户当前位置（需要定位权限）
const getUserLocation = async () => {
	try {
		const { latitude: currentLat, longitude: currentLng } = await uni.getLocation({ type: 'wgs84' });
		// 关键修改：将获取到的经纬度同步到地图中心变量
		latitude.value = currentLat;
		longitude.value = currentLng;
		userMarker.value.latitude = currentLat;
		userMarker.value.longitude = currentLng;
		// 将用户位置标记合并到mks数组（确保不重复）
		const isUserMarkerExist = mks.value.some(marker => marker.id === -1);
		if (!isUserMarkerExist) {
			mks.value.unshift(userMarker.value);  // 添加到数组最前面（避免被加油站图标覆盖）
		}
		return { userLat: currentLat, userLng: currentLng };
	} catch (error) {
		uni.showToast({
			title: '获取位置失败，请开启定位权限',
			icon: 'none'
		});
		return null;
	}
};
// 计算距离
const selectedCity = ref('');
const jl = ref(0)
const mks = ref([]);
const purchaseList = ref([]);
const userMarker = ref({
	id: -1,
	latitude: 0,
	longitude: 0,
	width: 30,  // 比加油站图标大，更明显
	height: 30,
	iconPath: '../../static/dw.png'  // 自定义用户位置图标（需提前在static目录添加此图片）
});
//Haversine公式计算经纬度距离（单位：Km）
const getDistance = (lat1, lng1, lat2, lng2) => {
	const R = 6371; // 地球半径（Km）
	const dLat = (lat2 - lat1) * Math.PI / 180;
	const dLng = (lng2 - lng1) * Math.PI / 180;
	const a =
		Math.sin(dLat / 2) * Math.sin(dLat / 2) +
		Math.cos(lat1 * Math.PI / 180) * Math.cos(lat2 * Math.PI / 180) *
		Math.sin(dLng / 2) * Math.sin(dLng / 2);
	const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
	return parseFloat((R * c).toFixed(2)); // 保留两位小数
};
const getStationList = async () => {
	try {
		// 先获取用户位置
		uni.showLoading({ title: '加载中...' });
		const userLocation = await getUserLocation();
		if (!userLocation) {
			uni.hideLoading();  // 位置获取失败时隐藏
			console.log("⚠️ 用户位置获取失败，未授权或设备不支持");
			return;
		}
		// 获取用户经纬度

		console.log("✅ 用户位置获取成功，经纬度：", userLocation.userLat, userLocation.userLng); // 打印用户位置
		const res = await unirequest({
			url: `${baseUrl}/gas/station/list`,
			method: 'GET'
		});
		console.log("接口返回原始数据：", res.data); // 打印接口原始响应
		if (res.data.code === 200) {
			// 筛选距离小于1km的加油站
			const filteredStations = res.data.rows.filter(station => {
				const distance = getDistance(
					userLocation.userLat,
					userLocation.userLng,
					Number(station.latitude),  // 字符串转数值
					Number(station.longitude)
				);
				return distance < 1; // 只保留距离小于1km的
			});
			console.log("筛选后符合条件的加油站数量：", filteredStations.length); // 打印筛选结果
			// 生成加油站标记数组
			const stationMarkers = filteredStations.map(station => ({
				id: station.id,
				latitude: Number(station.latitude),
				longitude: Number(station.longitude),
				width: 20,
				height: 25,
				iconPath: '../../static/dw1.png', // 修正加油站图标路径（从 pages/index 到 static 应为 ../static）
				title: station.name,
				address: station.address,
				phone: station.phone,
				week: station.week,
				img: station.img
			}));
			// 合并用户位置标记（确保用户标记始终存在）
			mks.value = [userMarker.value, ...stationMarkers];
		} else {
			console.log("⚠️ 接口返回非200状态码，错误信息：", res.data.msg);
		}
		uni.hideLoading();  // 隐藏加载
	} catch (error) {
		console.error("❌ 获取加油站列表异常：", error);
		uni.hideLoading();
	}
};
const getPurchaseList = async () => {
	try {
		const res = await unirequest({
			url: `${baseUrl}/chy/purchase/list`, // 后端接口地址
			method: 'GET'
		});
		if (res.data.code === 200) {
			// 清理数据中的反引号（处理img字段的`符号）
			purchaseList.value = res.data.rows.map(item => ({
				...item,
				img: item.img.replace(/`/g, '') // 移除img字段中的反引号
			}));
		}
	}
	catch (error) {
		console.error("获取购买记录失败：", error);
	}
}
function gengduo() {
	uni.navigateTo({
		url: '/pages/lsh_nearby_refeling_list/lsh_nearby_refeling_list'
	});
}
function gengduotuangou() {
	uni.navigateTo({
		url: '/pages/lsa-tuangou/lsa-tuangou'
	});
}
// 选中的商家对象
const info = ref({
	title: '商家名称',
	info: '商家详情'
})
// 选择商家的函数
function mkp(e) {
	const clickedMarker = mks.value.find(obj => obj.id === e.detail.markerId);
	if (clickedMarker) {
		// 计算当前位置与点击标记的距离（单位：Km）
		const isCurrentMarker = info.value.title === clickedMarker.title;
		if (isCurrentMarker) {
			// 再次点击：隐藏信息（重置为初始状态）
			info.value = {
				title: '商家名称',
				info: '商家详情'
			};
			jl.value = 0; // 可选：重置距离显示为0
		} else {
			const distance = getDistance(
				latitude.value,
				longitude.value,
				clickedMarker.latitude,
				clickedMarker.longitude
			);
			// 更新展示信息（使用加油站完整字段）
			info.value = {
				title: clickedMarker.title,
				address: clickedMarker.address,
				phone: clickedMarker.phone,
				week: `${clickedMarker.week}`,
				img: clickedMarker.img
			};
			jl.value = distance.toFixed(2); // 显示两位小数
		}
	}
}

const latitude = ref()
const longitude = ref()
// 当页面加载后立马执行
onLoad(() => {
	getUserLocation();
	getStationList();
	getPurchaseList();
	// 调用函数获取用户位置并更新地图
	chose();
	// 监听用户位置变化
	uni.onLocationChange((res) => {
		latitude.value = res.latitude; // 更新纬度
		longitude.value = res.longitude; // 更新经度
		// 更新用户位置标记的经纬度
		userMarker.value.latitude = res.latitude;
		userMarker.value.longitude = res.longitude;
		// 重新赋值触发视图更新（mks是响应式数组）
		mks.value = [...mks.value];
		getStationList();
	});
})
// 定义一个函数，选择地理位置
function chose() {
	// #ifdef H5
	navigator.geolocation.getCurrentPosition(
		position => {
			console.log(position.coords.latitude, position.coords.longitude);
			// 处理获取到的位置信息
		},
		error => {
			console.error(error);
			// 处理错误
		}
	);
	// #endif
	// #ifndef H5
	console.log('选择定位')
	uni.chooseLocation({
		success(res) {
			console.log('选择后的位置', res)
		}
	})
	// #endif
}
onShow(() => {
  uni.$on('citySelected', (cityName) => {
    selectedCity.value = cityName; // 更新搜索框显示
  });
});

// 移除事件监听防止内存泄漏
onUnload(() => {
  uni.$off('citySelected');
});


</script>

<style scoped>
.chat-icon {
	position: relative;
	top: 45rpx;
	left: 90%;
}

.uni-mt-10 {
	margin-top: -10rpx;
}

.map {
	width: 100%;
	height: 380rpx;
	margin-top: -30rpx;
}

.card {
	color: red;
	padding-bottom: 100rpx;
}

.top {
	width: 100%;
	height: 400rpx;
	background-image: url(@/static/bg.png);
	background-size: 100%;
}

.title {
	padding: 30rpx 0rpx;
	font-size: 30rpx;
	text-align: center;
	color: white;
	font-weight: bold;
	margin-top: -40rpx;
}

.im {
	width: 110rpx;
	height: 110rpx;
	border-radius: 20rpx;
}

.grid-item-box {
	flex: 1;
	/* // position: relative; */
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 15px 0;
}

.chose {
	width: 90%;
	margin: auto;
	background-color: #327CF6;
	color: white;
	position: relative;
	top: 30rpx;
}

.shop {
	display: flex;
	flex-direction: column;
	/* 改为垂直排列避免溢出 */
	padding: 15rpx;
}

.shop-v {
	width: 100%;
	/* 占满宽度 */
	font-weight: 400;
	margin-top: 10rpx;
	font-size: 28rpx;
}

.img-v {
	margin-top: -40rpx;
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	/* 允许子元素换行 */
}

.img-v,
.img-v1 {
	display: flex;
}

.img {
	height: 170rpx;
	width: 100%;
	border-radius: 10rpx;
}

.gengduo {
	position: relative;
	top: -90rpx;
	left: 570rpx;
	font-size: 30rpx;
	color: #1168EA;
}

.purchase-item {
	/* 每行显示2个：宽度50%（减去左右边距） */
	width: 50%;
	margin: 15rpx 0;
	padding: 15rpx;
	/* 调整内边距避免内容拥挤 */
	background: #f8f8f8;
	border-radius: 15rpx;
	box-sizing: border-box;
	/* 防止padding撑大宽度 */
}

/* 偶数项添加左边距（可选，根据设计调整） */
.purchase-item:nth-child(2n) {
	padding-left: 10rpx;
}

/* 奇数项添加右边距（可选，根据设计调整） */
.purchase-item:nth-child(2n+1) {
	padding-right: 10rpx;
}

.purchase-info {
	margin-top: 15rpx;
	padding: 0 20rpx;
}

.purchase-title {
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
}

.purchase-time,
.purchase-publisher,
.purchase-phone {
	font-size: 28rpx;
	color: #666;
	margin-top: 10rpx;
}
</style>